import React, {PureComponent} from "react";
import {
    Button,
    StyleSheet,
    Text,
    TouchableOpacity,
    Image,
    SafeAreaView,
    View,
    Dimensions,
    Modal,
    SectionList,
    ListView
} from "react-native";
import SelectSubjectModalCell from "../../../widget/select/SelectSubjectModalCell";
import LoginSexScene from "./LoginSexScene";


const {width} = Dimensions.get('window')

type Props = {

}


export default class LoginSubjectScene extends PureComponent<Props> {

    static navigationOptions = {
        header: null,
    };
    constructor(props) {
        super(props);
        this.state = {
            sections: [
                {
                    key: '小学',
                    data: [[{name: '一年级'}, {name: '二年级'}, {name: '三年级'}, {name: '四年级'}, {name: '五年级'}, {name: '六年级'}]]
                },
                {key: '初中', data: [[{name: '初一'}, {name: '初二'}, {name: '初三'}]]},
                {key: '高中', data: [[{name: '高一'}, {name: '高二'}, {name: '高三'}]]},
            ],
            selectString:'',
        }
    }
        //参数需要{}修饰，告诉是个对象
        _renderSectionHeader = ({section}) => {
            return (
                <View style={{flex: 1, height: 17, justifyContent: 'center'}}>
                    <Text style={styles.section_title}>{section.key}</Text>
                </View>
            )
        };
    _selectCell(value){
        this.setState({selectString:value})
        this.setState({sections: [
                {
                    key: '小学',
                    data: [[{name: '一年级'}, {name: '二年级'}, {name: '三年级'}, {name: '四年级'}, {name: '五年级'}, {name: '六年级'}]]
                },
                {key: '初中', data: [[{name: '初一'}, {name: '初二'}, {name: '初三'}]]},
                {key: '高中', data: [[{name: '高一'}, {name: '高二'}, {name: '高三'}]]},
            ]})

    }
    renderCells(item){

        var cells = []
        for (let i = 0; i < item.length; i++){
            let data = item[i]
            let cell = <SelectSubjectModalCell value={data.name} key={data.name} selectIndexString={this.state.selectString} callbackSubject={(item)=>{this._selectCell(item)}}/>
            cells.push(cell)
        }
        return (
            <View style={styles.list}>
                {cells}
            </View>
        )
    }
        //参数需要{}修饰，告诉是个对象
        _renderItem = (item) => {
            return (
                this.renderCells(item.item)
            )
        };
        _extraUniqueKey = (item) => {
            return "index" + item;
        };
        render()
        {
            return (
                <SafeAreaView style={{backgroundColor:'#F9F9F9',flex:1}}>
                    <View style={{justifyContent:'flex-end',flexDirection:'row',
                        marginRight:25,}}>
                        <TouchableOpacity style={styles.register_view} onPress={()=>{}}>
                            <Text style={styles.register_text}>跳过</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.container}>
                        <Text style={styles.contain_title} onPress={() => {
                            this.props.callbackSubject()
                        }}>设置所在的年级</Text>
                        <View style={{alignItems: 'flex-start', flexDirection: 'row'}}>
                            <SectionList style={styles.section_flat}
                                         ref = {(e)=>{this.sectionList = e;}}
                                         scrollEnabled={false}
                                         renderItem={this._renderItem}
                                         renderSectionHeader={this._renderSectionHeader}
                                         showsVerticalScrollIndicator={false}
                                         keyExtractor={this._extraUniqueKey}
                                         sections={this.state.sections}>

                            </SectionList>
                        </View>
                    </View>
                    <View style={{marginTop:48,justifyContent:'center',alignItems:"center",flexDirection:'row'}}>
                      <View style={{width:5,height:5,backgroundColor:'#9C9C9C',borderRadius:3}}/>
                      <View style={{marginLeft:6,width:20,height:5,backgroundColor:'#B7000C',borderRadius:3}}/>
                    </View>
                    <TouchableOpacity style={styles.login_btn} onPress={()=>{this.props.navigation.navigate('LoginSexScene')}}>
                        <Text style={{color:'white',fontSize:14,fontWeight:'bold'}}>下一步</Text>
                    </TouchableOpacity>
                </SafeAreaView>
            )
        }
    }
const styles = StyleSheet.create({
    backgroundView:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'rgba(0, 0, 0, 0.5)',
    },
    register_view:{
        width:55,
        height:25,
        borderRadius:13,
        backgroundColor:'#999999',
        justifyContent:'center',
        alignItems:'center',
    },
    register_text:{
        color:'white',
        fontWeight:'bold',
        fontSize:12,
    },
    container:{
        backgroundColor:'white',
        height:332,
        width:351,
        alignItems:'center',
        borderRadius:3,
        alignSelf:'center',
        marginTop:100,
    },
    contain_title:{
        color:'black',
        fontSize:16,
        fontWeight:'bold',
        marginTop:30,
    },
    section_flat:{
       marginTop:15,
        marginLeft:28,
        marginBottom:30,
    },
    section_title:{
        color:'rgba(0,0,0,0.8)',
        fontSize:14,
    },
    list:{
        flexDirection: 'row', //这里的属性很重要，可以学习下flex布局
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        justifyContent:'space-around',
        backgroundColor: '#FFFFFF',
        paddingLeft:29,
        paddingTop:15,
        paddingRight:28,
    },
    login_btn:{
        backgroundColor:"#DB3843",
        borderRadius:20,
        height:40,
        width:260,
        borderWidth:1,
        borderColor:'rgba(219, 56, 67, 0.3)',
        marginTop:31,
        justifyContent:'center',
        alignItems:'center',
        alignSelf:'center',
    },


})